<template>
	<div>
		<el-row :gutter="15">
			<el-form ref="meals" :model="meals" size="medium" label-width="101px" label-position="left">
				
				<el-col :span="12">
					<el-form-item label="姓名" prop="userName">
						<el-input v-model="meals.userName" placeholder="请输入姓名" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex">
						<el-input v-model="meals.sex" placeholder="请输入性别" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="年龄" prop="age">
						<el-input v-model="meals.age" placeholder="请输入年龄" clearable
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="平时喜好" prop="hobby">
						<el-input v-model="meals.hobby" placeholder="请输入平时喜好" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="注意事项" prop="announcements">
						<el-input v-model="meals.announcements" placeholder="请输入注意事项" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备注" prop="note">
						<el-input v-model="meals.note" placeholder="请输入备注" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<div slot="footer">
			<el-button type="primary" @click="save">确定</el-button>
			<el-button @click="close">取消</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'MealEdit',
		props: ['editid'],
		data() {
			return {
				meals: {
					meals_id:undefined,
					userName: undefined,
					sex: undefined,
					age: undefined,
					hobby: undefined,
					announcements: undefined,
					note:undefined
				},
				url: '/meals/save'
			}
		},
		computed: {},
		watch: {},
		created() {

			if (this.editid) {
				// 通过id 读原始数据
				this.axios.get('/meals/getById', response => {
					this.meals = response.obj;
				}, {
					id: this.editid
				})
			}
		},
		mounted() {},
		methods: {
			save() {
				console.log(this.meals);
				this.$refs['meals'].validate((valid) => {
					if (valid) {
						console.log(valid);
						this.axios.post(this.url, response => {
							console.log(response.obj);
							// 子组件要改变父组件的值
							this.$emit('update:show', false);
							this.$emit('update:editid', null);
							this.$emit('getData');
						}, this.meals)
					}
				})
			},
			close(){
				this.$emit('update:show',false);
			}
		}
	}
</script>
<style>
</style>
